<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./cssReset.css">
    <style>
        .dbg{
            width: 100%;
            height: 860px;
            background-color: #fdf8f4;
            /* 给父级相对定位 */
            position: relative;
        }
        .center{
            width: 1200px;
            margin: 0 auto;
        }
        .bg{
            width: 100%;
            height: 860px;
            background-image: url(./img/login_03.jpg);
            background-color: #fdf8f4;
            background-repeat: no-repeat;
        }
        .na{
            width: 100%;
            height: 70px;
            background-color: rgba(0, 0, 0, 0.8);
            /* 绝对定位 */
            position: absolute;
            top: 0;
        }
        .bg .nav {
            height: 70px;
        }
        .bg img{
            position: absolute;
            z-index: 10;
        }
        .nav > ul {
            width: 250px;
            position: absolute;
            z-index: 9;
            margin-left: 980px;
            float: left;
        }
        .nav >  ul > li{
            width: 60px;
            height: 70px;
            float: left;
            line-height: 70px;
        }
        .nav >  ul > li > a{
            color: #999999;
            font-size: 12px;
        }
        .table{
            width: 330px;
            height: 445px;
            background-color: #fff;
            margin-left: 793px;
            margin-top: 150px;
            box-shadow: 2px 2px 10px rgb(226, 226, 226),
            -2px -2px 10px rgb(224, 224, 224);
            padding: 25px;
        }
        .table ul{
            display: flex;
            justify-content: space-around;
            margin-bottom: 50px;
        }
        .table ul li a{
            font-size: 18px;
            color: #666666;
        }
        .table ul li a:visited{
            color: #f19108;
        }
        .yi{
            width: 310px;
            height: 50px;
            border: 1px solid #dedede;
            /* 去掉边框黑线 */
            outline: none;
            padding: 0 7px;
            /* 给内边距撑开  取消撑开 */
            box-sizing: border-box;
        }
        .uname{
            margin-bottom: 15px;
        }
        .upwd{
            margin-bottom: 9px;
        }
        .zh label{
            font-size: 12px;
            color: #000;
        }
        .table button{
            width: 310px;
            height: 50px;
            background-color: #f19108;
            color: #fff;
            border: 0;
            font-size: 16px;
            margin-top: 35px;
            margin-bottom: 45px;
        }
        .table a{
            display: block;
            font-size: 12px;
            color: #dedede;
        }
        .zc{
            display: flex;
            margin-top: 65px;
        }
        .zc span{
            font-size: 12px;
            color: #dedede;
        }
        .zc a{
            font-size: 12px;
            color: #f19108;
        }
        .table .mima{
            margin-left: 108px;
            color: #666666;
        }
        .table .mima:hover{
            color: rgb(81, 15, 143);
        }
        .table .qq,.table .wx{
            float: left;
        }
        .table .qq a:nth-child(1),.table .wx a:nth-child(2){
            margin-top: 20px;
        }
        .table .qq a:nth-child(2),.table .wx a:nth-child(1){
            margin-left: 24px;
            margin-top: 20px;
        }
        .table .wx img{
            width: 20px;
        }
        .table .wx a:nth-child(2){
            margin-left: 53px;
        }
        .table .qq a:hover,.table .wx a:hover{
            color: blueviolet;
        }
    </style>
</head>
<body>
    <!-- 橙色大背景 -->
    <div class="dbg">
        <!-- 网页居中 -->
        <div class="center">
            <!-- 背景图 -->
            <div class="bg">
                <!-- 导航条内容 -->
                <div class="nav">
                    <!-- logo -->
                    <img src="./img/logo.png">
                    <!-- 导航 60 -->
                    <ul>
                        <li><a href="#">寺库首页</a> </li>
                        <li> <a href="#">收藏寺库</a></li>
                        <li><a href="#">寺库app</a></li>
                     </ul>
                </div>
                <!-- 登录口 -->
                <div class="table">
                    <ul>
                        <li><a href="#">扫码登录</a></li>
                        <li><a href="#">密码登录</a></li>
                    </ul>
                    <input type="text" placeholder="用户名/手机号/邮箱" class="uname yi">
                    <input type="password" placeholder="密码" class="upwd yi">
                    <div class="zh">
                        <input type="checkbox" id="check">
                        <label for="check">记住账号</label>
                    </div>
                    <button>立即登录</button>
                    <a href="#">使用合作网站账号登录</a>
                    <div class="qq">
                        <a href="#">
                            <img src="./img/qq.jpg">
                        </a>
                        <a href="#">QQ</a>
                    </div>
                    <div class="wx">
                        <a href="#">
                            <img src="./img/WeChat.png">
                        </a>
                        <a href="#">微信</a>
                    </div>
                    <div class="zc">
                        <span>还不是寺库会员?</span>
                        <a href="#">免费注册</a>
                        <a href="#" class="mima">忘记密码?</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新闻按网页比例放大 -->
        <div class="na"></div>
    </div>
</body>
</html>